<!--求职者/岗位学历分布-->
<template>
  <div class="education">
    <div class="left">
      <div class="chart">
        <div style="height: 100%;" ref="left"></div>
      </div>
      <div class="bottom" ref="text1">
        <div class="middle">
          <p>
            <span>同比增长</span>
            <img src="../all-count/tongbi.png" alt="">
          </p>
          <p>
            <span class="num">{{formatNum(currentApply.yearOnYearRate)}}</span>
            <span>%</span>
            <img src="../all-count/fall.png" alt="" v-if="!fallOrRise(currentApply.yearOnYearRate)" class="ani-down">
            <img src="../all-count/rise.png" alt="" v-if="fallOrRise(currentApply.yearOnYearRate)" class="ani-up">
          </p>
        </div>
        <div class="middle">
          <p>
            <span>环比增长</span>
            <img src="../all-count/huanbi.png">
          </p>
          <p>
            <span class="num">{{formatNum(currentApply.ringRatioRate)}}</span>
            <span>%</span>
            <img src="../all-count/fall.png" alt="" v-if="!fallOrRise(currentApply.ringRatioRate)" class="ani-down">
            <img src="../all-count/rise.png" alt="" v-if="fallOrRise(currentApply.ringRatioRate)" class="ani-up">
          </p>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="chart">
        <div style="height: 100%;" ref="right"></div>
      </div>
      <div class="bottom" ref="text2">
        <div class="middle">
          <p>
            <span>同比增长</span>
            <img src="../all-count/tongbi.png" alt="">
          </p>
          <p>
            <span class="num">{{formatNum(currentJob.yearOnYearRate)}}</span>
            <span>%</span>
            <img src="../all-count/fall.png" alt="" v-if="!fallOrRise(currentJob.yearOnYearRate)" class="ani-down">
            <img src="../all-count/rise.png" alt="" v-if="fallOrRise(currentJob.yearOnYearRate)" class="ani-up">
          </p>
        </div>
        <div class="middle">
          <p>
            <span>环比增长</span>
            <img src="../all-count/huanbi.png">
          </p>
          <p>
            <span class="num">{{formatNum(currentJob.ringRatioRate)}}</span>
            <span>%</span>
            <img src="../all-count/fall.png" alt="" v-if="!fallOrRise(currentJob.ringRatioRate)" class="ani-down">
            <img src="../all-count/rise.png" alt="" v-if="fallOrRise(currentJob.ringRatioRate)" class="ani-up">
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts'
import {mapGetters} from 'vuex'
import {AutoHighLight} from '../../common/js/utils'
import {fallRise} from '../../common/js/mixin'
import $ from 'jquery'
import {INTERVAL} from '../../common/js/config'

export default {
  name: 'education',
  mixins: [fallRise],
  computed: {
    ...mapGetters([
      'currentTime'
    ])
  },
  data() {
    return {
      currentApply: {
        yearOnYearRate: '',
        ringRatioRate: ''
      },
      currentJob: {
        yearOnYearRate: '',
        ringRatioRate: ''
      },
      chartOptions: {
        title: {
          text: '岗位学历层次分布图',
          left: 'center',
          top: '10',
          textStyle: {
            color: '#8cd1f7',
            fontSize: '18',
            align: 'center'
          }
        },
        color: ['#557f8a', '#c9d6e2', '#2d80ae', '#1c5a83', '#52dce6'],
        tooltip: {
          trigger: 'item',
          formatter(params) {
            return `${params.name}<br>${params.value}个（${params.percent}%）`
          }
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          show: false
        },
        series: [
          {
            name: '求职者学历分布',
            minAngle: 10,
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '60%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '18',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: []
          }
        ]
      },
      chartOptions3: {
        title: {
          text: '求职者学历分布图',
          left: 'center',
          top: '10',
          textStyle: {
            color: '#8cd1f7',
            fontSize: '18',
            align: 'center'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter(params) {
            return `${params.name}<br>${params.value}人（${params.percent}%）`
          }
        },
        legend: {
          x: 'center',
          y: 'bottom',
          data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
        },
        color: ['#409eff', '#e29439', '#0be89c', '#73b0f0', '#ff6449', '#29b1ba', '#b43d6f', '#b29fdb'],
        toolbox: {
          show: false,
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            magicType: {
              show: true,
              type: ['pie', 'funnel']
            },
            restore: {show: true},
            saveAsImage: {show: false}
          }
        },
        calculable: true,
        series: [
          {
            name: '人员性质',
            type: 'pie',
            radius: [30, 65],
            center: ['50%', '55%'],
            roseType: 'radius',
            label: {
              normal: {
                position: 'inside',
                show: true
              },
              emphasis: {
                show: true
              }
            },
            lableLine: {
              normal: {
                length: 2,
                length2: 2,
                show: false
              },
              emphasis: {
                show: false
              }
            },
            data: []
          }
        ]
      }
    }
  },
  methods: {
    getData() { // 求职者学历分布
      this.$post('/service/business/statistic/statistic/getEducation', {
        beginDate: this.currentTime.start,
        endDate: this.currentTime.end
      }).then(res => {
        this.chartApply.setOption({
          series: [{
            data: res.result.map(item => {
              return {
                name: item.name,
                value: item.cnt,
                yearOnYearRate: item.yearOnYearRate,
                ringRatioRate: item.ringRatioRate
              }
            })
          }]
        })
      })
    },
    getData2() { // 岗位学历分布
      this.$post('/service/business/statistic/statistic/getJobEducation', {
        beginDate: this.currentTime.start,
        endDate: this.currentTime.end
      }).then(res => {
        res.result.sort((a, b) => a.cnt - b.cnt)
        this.chartJob.setOption({
          series: [{
            data: res.result.map(item => {
              return {
                name: item.name,
                value: item.cnt,
                yearOnYearRate: item.yearOnYearRate,
                ringRatioRate: item.ringRatioRate
              }
            })
          }]
        })
      })
    },
    renderApply() {
      this.chartApply = echarts.init(this.$refs.left)
      this.chartApply.setOption(this.chartOptions3)
      let parentDom = $(this.$refs.text1).parent()
      this.auto1 = new AutoHighLight({
        e: this.chartApply,
        enlarge: true,
        cb: data => {
          this.currentApply = data
        },
        enlarged: (e) => {
          $(this.$refs.text1).appendTo(e)
          $(this.$refs.text1).addClass('static')
          this.chartApply.setOption({
            series: [{
              radius: [100, 300]
            }]
          })
        },
        closed: () => {
          $(this.$refs.text1).appendTo(parentDom)
          $(this.$refs.text1).removeClass('static')
          this.chartApply.setOption({
            series: [{
              radius: [45, 80]
            }]
          })
        }
      })
    },
    renderJob() {
      this.chartJob = echarts.init(this.$refs.right)
      this.chartOptions2 = JSON.parse(JSON.stringify(this.chartOptions))
      this.chartOptions2.title.text = '岗位学历层次分布图'
      this.chartOptions2.tooltip.formatter = params => {
        return `${params.name}<br>${params.value}人（${params.percent}%）`
      }
      this.chartJob.setOption(this.chartOptions2)
      let parentDom = $(this.$refs.text2).parent()
      this.auto2 = new AutoHighLight({
        e: this.chartJob,
        enlarge: true,
        cb: data => {
          this.currentJob = data
        },
        enlarged: (e) => {
          $(this.$refs.text2).appendTo(e)
          $(this.$refs.text2).addClass('static')
        },
        closed: () => {
          $(this.$refs.text2).appendTo(parentDom)
          $(this.$refs.text2).removeClass('static')
        }
      })
    },
    start() {
      clearInterval(this.timer)
      this.getData()
      this.getData2()
      if (this.currentTime.end === this.$dateFormat(new Date(), 'yyyy-MM-dd')) {
        this.timer = setInterval(() => {
          this.getData()
          this.getData2()
        }, INTERVAL)
      }
    }
  },
  created() {
    this.$watch('currentTime', () => {
      setTimeout(() => {
        this.start()
      }, 20)
    })
  },
  mounted() {
    this.renderApply()
    this.renderJob()
    this.start()
  }
}
</script>
<style lang="scss" scoped>
  @import "../../common/style/variables";

  .education {
    height: 100%;
  }

  .left {
    width: 50%;
    height: 100%;
    float: left;
  }

  .right {
    width: 50%;
    height: 100%;
    float: left;
  }

  .chart{
    height: 74.2%;
  }
  .bottom{
    height: 25.8%;
    display: flex;
    justify-content: center;
  }
  .middle{
    font-size: 14px;
    padding: 0 10px;
    .num{
      font-size: 30px;
    }
    img{
      margin-left: 5px;
    }
    p{
      display: flex;
      &:nth-child(1){
        align-items: center;
        color: #95b7f9;
      }
      &:nth-child(2){
        align-items: baseline;
        color: #00d1ff;
      }
    }
  }
  .static{
    position: absolute;
    left: 20px;
    bottom: 50px;
    width: 30%;
  }
</style>
